<template>
  <nav class="bottom-nav">
    <ul>
      <li 
        v-for="(item, index) in navItems" 
        :key="index"
        @click="handleClick(index)"
        :class="{ active: currentIndex === index }"
        class="nav-item"
      >
        {{ item.name }}
        <!-- 下拉菜单 -->
        <ul class="sub-nav" v-if="currentIndex === index && item.subItems.length">
          <li 
            v-for="(subItem, subIndex) in item.subItems" 
            :key="subIndex"
            @click.stop="handleSubClick(item.name, subItem)"
          >
            {{ subItem }}
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</template>

<script setup>
import { ref } from 'vue';

// 导航数据
const navItems = ref([
  { name: '稻壳', subItems: ['模板中心', '素材市场', '稻壳会员'] },
  { name: 'WPS协作', subItems: ['在线协作', '文档共享', '团队空间'] },
  { name: 'WPS AI', subItems: ['智能写作', '文档总结', 'AI绘图'] },
  { name: 'PDF', subItems: ['PDF转换', 'PDF编辑', 'PDF签名'] },
  { name: '手机版', subItems: ['Android下载', 'iOS下载', '扫码下载'] },
  { name: '联系我们', subItems: ['客服中心', '意见反馈', '商务合作'] }
]);

// 当前选中索引
const currentIndex = ref(-1);

// 点击导航项
const handleClick = (index) => {
  // 检查是否是前三个导航项
  if (index === 0) {
    // 跳转至 https://www.kimxz.com/
    window.open('https://www.kimxz.com/', '_blank');
  } else if (index === 1) {
    // 跳转至 https://ai.wps.cn/
    window.open('https://ai.wps.cn/', '_blank');
  } else if (index === 2) {
    // 这里可以添加第三个导航项的跳转链接
    window.open('https://example.com/', '_blank');
  } else {
    // 其他项逻辑
    currentIndex.value = currentIndex.value === index ? -1 : index;
  }
};

// 点击子菜单
const handleSubClick = (parentName, subItem) => {
  console.log(`从${parentName}点击了子菜单：${subItem}`);
  currentIndex.value = -1; // 点击子项后关闭下拉菜单
};
</script>

<style scoped>
/* 关键：固定在底部 */
.bottom-nav {
  position: fixed; 
  bottom: 0;         /* 靠底部 */
  left: 0;           /* 靠左 */
  right: 0;          /* 靠右，让宽度铺满 */
  background-color: #f8f8f8;
  border-top: 1px solid #eee;
  z-index: 999;      /* 确保在其他内容上方 */
}

.bottom-nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  padding: 10px 20px;
  color: #666;
  cursor: pointer;
  border-right: 1px solid #ddd;
  transition: all 0.3s ease;
  position: relative;
  user-select: none;
}

.nav-item:last-child {
  border-right: none;
}

.nav-item:hover {
  background-color: #eaeaea;
  color: #333;
}

.nav-item.active {
  background-color: #e0e0e0;
  color: #0078ff;
  transform: scale(1.05);
}

/* 下拉菜单样式 */
.sub-nav {
  position: absolute;
  bottom: 100%; /* 在导航项上方显示 */
  left: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 120px;
  flex-direction: column;
  padding: 5px 0;
  z-index: 100;
}

.sub-nav li {
  padding: 8px 15px;
  color: #333;
  border: none;
  text-align: left;
}

.sub-nav li:hover {
  background-color: #f0f7ff;
  color: #0078ff;
  transform: none;
}

/* 点击动画效果 */
@keyframes clickEffect {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1.05); }
}

.nav-item.active {
  animation: clickEffect 0.3s ease;
}
</style>